<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getGoodsDetail } from '@/api/goods'
import type { Goods } from '@/api/goods/type'
import { BaseResponse } from '@/api/base'
import { toast } from '@/utils/common'
import { baseUrl } from '@/config'

const goodsDetail = ref<Goods>({
  id: 0,
  name: '',
  price: 0,
  remain: 0,
  description: '',
  url: '',
  urlArr: [],
})
const goodsId = ref<number>(0)

const loadGoodsDetail = async (id: number) => {
  try {
    const res: BaseResponse = await getGoodsDetail(id)
    goodsDetail.value = res.data
    goodsDetail.value.urlArr = goodsDetail.value.url.split(',').map((url: string) => baseUrl + url)
  } catch (e: BaseResponse) {
    toast(e.tips)
  }
}

onLoad((option: any) => {
  goodsId.value = option.id
  loadGoodsDetail(option.id)
})

const computedWidth = computed(() => {
  return uni.upx2px(750 - 55) / 3 + 'px'
})


const buyGoods = () => {
  uni.navigateTo({
    url: '/pages/order/create?id=' + goodsId.value + '&type=goods',
    success: (res: any) => {
      res.eventChannel.emit('sendGoodsDetail', {
        ...goodsDetail.value
      })
    }
  })
}

</script>

<template>
  <view class="goods-detail">
    <view class="goods-detail-image">
      <image :src="goodsDetail.urlArr[0]" mode="aspectFill">
      </image>
    </view>
    <view class="goods-detail-content">
      <view class="goods-detail-price">
        {{ goodsDetail.price }}
      </view>
      <view class="goods-detail-title">
        {{ goodsDetail.name }}
      </view>
      <view v-if="goodsDetail.remain > 0" class="goods-detail-sale">
        剩余数量：{{ goodsDetail.remain }}
      </view>
      <view v-else class="goods-detail-sale">
        已售罄
      </view>
    </view>
    <user-info class="goods-detail-publisher" :data="goodsDetail" :phone="true"></user-info>
    <view class="goods-detail-desc">
      <uv-divider text="商品详情" :hairline="true"></uv-divider>
      <uv-album style="margin-bottom: 5rpx;" rowCount="3" :urls="goodsDetail.urlArr" space="5rpx"
        :multipleSize="computedWidth"></uv-album>
      <uv-parse :content="goodsDetail.description"></uv-parse>
    </view>
    <view class="goods-detail-buy" v-if="goodsDetail.remain > 0">
      <uv-button color="#ff7744" class="goods-detail-buy-btn" @click="buyGoods" text="立即购买">
      </uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.goods-detail-image {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;

  image {
    width: 100%;
  }
}

.goods-detail-content {
  margin-bottom: 10rpx;
  padding: 0 20rpx;
  background-color: #fff;

  .goods-detail-price::before {
    content: '￥';
    font-size: 30rpx;
    font-weight: bold;
  }

  .goods-detail-price {
    font-size: 40rpx;
    color: #ff4400;
    padding: 10rpx 0;
  }

  .goods-detail-sale {
    font-size: 28rpx;
    text-align: end;
    color: #999;
    padding: 10rpx 0;
  }

  .goods-detail-title {
    padding: 10rpx 0;
  }
}

.goods-detail-publisher {
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 10rpx;
  background-color: #fff;
  margin-bottom: 10rpx;

}

.goods-detail-desc {
  padding: 10rpx 20rpx 0 20rpx;
  background-color: #fff;
}

.goods-detail {
  padding-bottom: 200rpx; // 为底部按钮预留空间
}

.goods-detail-buy {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  z-index: 10;
}
</style>
